<template>
  <div id="main1"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
var option;

option = {
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      labelLine: {
        length: 1
      },
      radius: [40, 140],
      center: ['50%', '50%'],
      roseType: 'area',
      data: [
        { value: 50, name: 'No.1' },
        { value: 70, name: 'No.2' },
        { value: 30, name: 'No.3' },
        { value: 40, name: 'No.4' },
        { value: 60, name: 'No.5' }
      ]
    }
  ]
};
onMounted(() => {
  var chartDom = document.getElementById("main1");
  var myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
});
</script>

<style>
#main1 {
  width: 100%;
  height: 100%;
}
</style>
